html{font-size:100px}
@import '../ui/reset'
  
.layout
  width 100%
  position absolute
  top 0
  left 0
  right 0
  bottom 0
  font-size 14px
  background-color #F6F6F6
.navigation
  width 180px
  position fixed
  z-index 50
  height 100%
  background-color #525252

.nav-header
  background-color #393939 
  height 60px
  color #fff
  padding 14px 0 0 30px
  border-bottom 2px solid #57CFFF
  img
    margin-right 17px
    // width 30px
    // height 30px
  span 
    display inline-block
    vertical-align top
    margin-top 6px

.progress-metric-type
    font-size 12px
    margin-left 20px

.nav-box
  margin 0
  padding 4px 0 0
  li
    padding 0
    margin 0
    line-height 46px
    transition .3s
    padding-left 45px
    color #ACACAC
    overflow hidden
    position relative
    cursor pointer
    &:hover
      color #fff
    &:before
      content ""
      position absolute
      width 200px
      height 140px
      right 0
      top -70px
      margin-top 23px
      z-index -1
      opacity .1
      transition .3s
      border-radius 50%
      transform scale(0)
      transform-origin 20% 70%
      background-color #000
    &.active
      color #fff
      &:before
        opacity .3
        right 3px
        transform scale(1)
.container
  width 100%
  padding-left 180px
.container-header
  height 60px
  color #777777
  font-size 20px
  padding-left 30px
  position fixed
  z-index 49
  top 0
  left 180px
  right 0
  background-color #fff
  box-shadow 0 0 4px rgba(0,0,0,.1)
  [data-role="button"]
    position absolute
    top 13px
    right 45px
    transition .3s
    color #999999
    height 34px
    line-height 34px
    background-color #fff
    border 1px solid #E5E5E5
    border-radius 17px
    &:hover
      background-color #2EB7F5
      border-color #2EB7F5
      color #fff
    &:active
      background-color #17A1DF
      border-color #17A1DF
      color #fff
.container-box
  position absolute
  top 60px
  left 180px
  right 0
  bottom 0
  overflow scroll
  transition .5s
  padding 30px
.container-enter
  opacity 0
  transition 1ms
.container-enter-active
  opacity 1
  transition .5s
.container-leave
  opacity 1
.container-leave-active
  opacity 0
.container-layout
  padding 40px
  border 1px solid #DFE1E7
  background-color #fff
.container-title
  color #777
  font-size 18px
  margin-bottom 20px
.title span
  position absolute
  left 30px
  line-height 60px
  transition .5s
.title-enter
  opacity 0
.title-enter-active
  opacity 1
.title-leave
  opacity 1
.title-leave-active
  opacity 0

.toast
  transform translate(0, 10px)

.remind-item
  margin 10px 0
.remind-span
  color #7E7F81
  margin-right 25px
  width 175px
  text-align right
  display inline-block
.remind-area
  display inline-block
  input
    width 36px
    padding 0 5px
    margin 0 5px
.inputArea
  >[data-role="fieldArea"]
    width 280px
    display inline-block
.kudo-item
  height 30px
  margin-bottom 5px
  color #999
  .tip
    width 40px
    background-color transparent
    margin 0 
    display inline-block
  > *
    vertical-align top
  .error
    line-height 32px
    font-size 12px
    color #fa6673
  .img
    width 30px
    height 30px
    margin-right 10px
    border-radius 50%
    display inline-block
    background-color #aaa
    cursor pointer
    &.active
      background-color transparent
      border-radius 0
    img
      width 100%
      height 100%
  .name,.des
    height 30px
    line-height 30px
    border 1px solid #ccc
    border-radius 3px
    margin-right 5px
    padding 0 5px
    color #999
    .name
      width 100px  
    .des
      width 300px 
.kudo-box
  word-break normal !important
  width 570px
  padding 20px 30px
.icon-item
  width 40px
  height 40px
  margin 5px
  display inline-block
  vertical-align top
  cursor pointer
  position relative
  border 1px solid transparent
  padding 2px
  &.disabled
    opacity .3
    cursor not-allowed
  &.active
    cursor default
    border-color #00a0f6
  img
    width 100%
